<template>
  <div class="app-container">
    <el-form ref="customer" :model="customer" :rules="rules" label-width="100px" class="demo-ruleForm" style="max-width: 500px;">
      <el-form-item label="媒体名称" prop="advertiser">
        <el-input v-model="customer.advertiser" />
      </el-form-item>
      <el-form-item label="联系人" prop="contacts_name">
        <el-input v-model="customer.contacts_name" />
      </el-form-item>
      <el-form-item label="联系人电话" prop="contacts_tel">
        <el-input v-model="customer.contacts_tel" />
      </el-form-item>
      <el-form-item label="联系人职务" prop="contacts_position">
        <el-input v-model="customer.contacts_position" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('customer')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Resource from '@/api/resource';
const customerResource = new Resource('customer');

export default {
  name: 'Add',
  data() {
    return {
      customer: {
        advertiser: '',
        contacts_name: '',
        contacts_tel: '',
        contacts_position: '',
        type: '2',
      },
      rules: {
        advertiser: [
          { required: true, message: '请输入媒体名称', trigger: 'blur' },
        ],
        contacts_name: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' },
        ],
        contacts_tel: [
          { required: true, message: '请输入联系人联系方式', trigger: 'blur' },
        ],
        contacts_position: [
          { required: true, message: '请输入联系人职位', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.createCustomer();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    createCustomer(){
      customerResource.store(this.customer)
        .then(response => {
          this.$message({
            message: '恭喜，媒体 ' + this.customer.advertiser + ' 添加成功.',
            type: 'success',
            duration: 5 * 1000,
          });
        }).catch(error => {
          console.log(error);
        });

      this.$router.push({ name: 'mediaCustomerList' });
    },
  },
};
</script>

<style scoped>

</style>
